<template>
	<view class="content">
		<u-navbar :fixed="false" title="选择工艺路线" :autoBack="true" :safeAreaInsetTop="true" leftIconColor="#fff">
		</u-navbar>

		<view class="MainBox">
			<!-- 非空数据 -->
			<view class="HasDataBox" v-if="PageList.length">
				<!-- 排序列表 -->
				<!-- <view> -->
				<m-basic-drag class="ListBox" v-model="PageList" itemKey="index" :column="1" itemHeight="100px"
					PageFun="Dispatch" height="100%">
					<template #item="{element,index}">

						<view class="MaxBox x-f">
							<view class="TheIndex x-f">
								<view class="IndexBox">
									<text>{{index +1}}</text>
								</view>
							</view>

							<view class="x-f" style="flex: 1;height: 100%;padding: 10px 16px 10px 6px;">

								<view class="x-bc"
									style="background-color: #fff;height: 100%;width: 100%;padding: 6px 10px;border-radius: 12px;">
									<view class="LeftBox x-f">
										<u-icon name="minus-circle-fill" color="#f56c6c" size="24"
											@click="DeleteListData(element,index)"></u-icon>

										<view v-if="element.Type"
											style="height: 100%;background-color: #c6e0fc;padding: 4px 2px;border-radius: 4px;margin-left: 4px;">
											<!-- <uni-icons class="Icon" color="#209cde" custom-prefix="iconfont"
												type="icon-gongyiluxian" size="18"></uni-icons> -->


											<uni-icons class="Icon" color="#209cde"
												size="18">{{$utils.toUniCode('&#xe640;')}}</uni-icons>
										</view>

										<text style="margin-left: 8px;">{{element.ProcedureName}}</text>

										<!-- 如果没有选择人员，则展示 -->
										<u-icon v-if="element.NotEmply" name="person-delete-fill" color="#f50d0d"
											size="24"></u-icon>


										<u-icon v-if="(element.WCQty > 0)" name="pushpin-fill" color="#868686"
											size="24"></u-icon>
									</view>

									<view class="RightBox x-f" style="height: 100%;">

										<u-icon name="list" color="#999" size="28"
											style="font-weight: 600;margin-right: 6px;"></u-icon>


										<uni-icons type="compose" color="#999" size="28"
											@click="EditCell(element,index)"></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</template>
				</m-basic-drag>

				<!-- </view> -->

				<!-- 添加任务 -->
				<view class="BtnBox" style="margin: 20px 0;">
					<button @click="GetProcedure" class="SaveBtn">
						<uni-icons type="plusempty" color="#51d0d0" size="20"></uni-icons>
						添加任务
					</button>

				</view>
			</view>

			<!-- 空状态 -->
			<view class="isEmptyBox" v-else>
				<u-empty mode="data" icon="/static/image/Img/DataEmpty.png" text="暂无数据" textColor="#999"
					style="margin: 0 auto;">
					<view class="EmptyTextBox">
						<view class="EmptyText">
							<text>可选择【添加工序】或【添加工艺路线】</text>
						</view>
						<button @click="GetProcedure" class="EmptyAddBtn" type="primary">
							<view class="BtnText">
								<uni-icons type="plusempty" color="#fff" size="20"></uni-icons>
								添加任务
							</view>
						</button>
					</view>
				</u-empty>
			</view>
		</view>


		<view class="BottomBox" v-if="PageList.length" :style="$utils.disposeSafeBottomFun()">
			<!-- <button class="SaveBtn">保存工艺路线</button> -->
			<button class="SubBtn CommonBtnSize" @click="SubmitBtn">确定</button>
		</view>


	</view>
</template>

<script>
	// 工艺路线
	export default {
		data() {
			return {
				Dispatch_Create_Formdata: {}, // 主表信息

				PageList: [],
				FWorkshop: {}, // 主表带入的工作中心数据 
				PageItemData: {}, // 选中的详细数据
				PageListIndex: null, // 选中的索引
				PageGongxuType: 'Main', // 判断打开的工序是主列表还是子列表 'Main' - 主列表 'child' - 子列表

				ShowPathPopup: false, // 添加任务 - 路径 弹层
				PathPopupModuleData: [{
					Icon: 'icon-gongxu',
					title: '选择工序',
					id: 0,
				}, {
					Icon: 'icon-gongyiluxian',
					title: '选择工艺路线',
					id: 1,
				}],
				TotalPopup: 0, // 记录列表弹层数据的总数量
				ShowChoiceProcess: false, // 选择工序弹层
				ProcessList: [], // 工序弹层列表数据
				PopupLoadStatus: 'loadmore', // 弹层列表加载
				page: {
					pageIndex: 1, // 页码
					pageSize: 30, // 每页数量
				},
				searchValue: '', // 弹层搜索框

				ShowChoiceRouting: false, // 选择工艺路线弹层
				RoutingList: [], // 工艺路线弹层列表数据
				currentIndex: 0, // 工艺路线弹层类型选项 
				ShowDataInfo: false, // 工艺详情
				PopupInfoData: [], // 工艺详情数据

				TabSelectIndex: 0, // 判断是工序还是工艺路线 0-工序 1-工艺路线 
				TheContainer: [], // 记录弹层列表选中的数据
				IsCheckedLength: 0, // 弹层底部显示的选中项数量
				customTabs: [{
					text: '添加工序',
					id: 1,
				}, {
					text: '添加工艺路线',
					id: 2,
				}],
				EditIndex: null, // 选中的主列表索引
			}
		},
		onHide() {

			this.$store.commit('TicketModule/ChangeAndSetStateData', {
				Name1: 'BaseScreenParm',
				data: null
			});
		},
		created() {
			let that = this;
			let Data = [];
			Data = JSON.parse(JSON.stringify(this.$store.state.BaseScreenParm));

			// console.log(JSON.stringify(Data))

			this.Dispatch_Create_Formdata = Data['formData'];

			let NewData = Data.RoutingData.map(item => {
				return {
					...item,
					NotEmply: that.$utils.isEmpty(item.EmplName),
				}
			})

			if (NewData.length) {
				this.PageList = JSON.parse(JSON.stringify(NewData))

				this.PageList.map((item, index) => {
					item['index'] = index
				})
			}

		},
		mounted() {
			let that = this;
			uni.$on('Dispatch_EditInfo_Change', function(ret) {
				if (ret.type == '工序') {

					ret.data.NotEmply = that.$utils.isEmpty(ret.data.EmplName);
					// console.log(ret.data.EmplName)

					that.PageList.splice(that.EditIndex, 1);
					that.PageList.splice(that.EditIndex, 0, ret.data);

					that.PageList.map((item, index) => {
						// if (index == that.EditIndex) {
						// 	console.log(that.EditIndex)
						// 	item = Object.assign(item, ret.data);
						// }
						item['index'] = index
					})
					console.log(that.PageList)


					// that.PageList[that.EditIndex] = ret.data;

					// that.PageList.map((item, index) => {
					// 	item['index'] = index
					// })
				}
			})

			uni.$on('Dispatch_Routing_Choice', function(ret) {
				if (ret.type == '添加工序') {
					// ret.data
					let ChoiceData = JSON.parse(JSON.stringify(ret.data));

					let Data = [];

					ChoiceData.map(item => {
						item.Type = 0;
					});

					// Data.push(...ChoiceData);
					that.PageList.push(...ChoiceData)

					that.PageList = that.PageList.map((item, index) => {
						return {
							...item,
							index: item['index'],
							NotEmply: that.$utils.isEmpty(item.EmplName)
						}
					});


					// Data.map((item, index) => {
					// 	item['index'] = index;
					// });
					// 现在这一步是直接替换原有数据，考虑是否需要将原有数据插入而不是替换
					// that.PageList = Data;
				}
			})

		},
		methods: {
			GetProcedure() { // 前往工序
				let obj = {
					allowClear: false,
					cmd: 'XGD_Procedure',
					type: '添加工序',
					ListeningName: 'Dispatch_Routing_Choice',
					// multiple: false,
					serverSearch: {
						isPaging: true, //是否分页
						searchKey: 'SearchKey', //搜索关键词，应包含在param中
						showText: 'ProcedureName', //查询结果显示的字段
						pageIndexStr: 'PageIndex', //分页页码字段，应包含在param中
						// ChoiceDataKey: 'ProcedureID',
						// ChoiceDataData: this.PageList,
					},
					param: {
						SearchKey: '',
						PageIndex: 1,
						PageSize: 30,
					}
				}

				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'BaseScreenParm',
					data: obj
				})

				uni.navigateTo({
					url: '/commonPage/Tool/SelectBaseScreen'
				})

				// that.ShowPathPopup = true;
			},
			DeleteListData(data, index) { // 主列表 删除按钮
				// console.log(JSON.stringify(data))
				// console.log(JSON.stringify(index))
				if (data.WCQty > 0) {
					return this.$utils.msg('【' + data.ProcedureName + '】已报工，禁止删除！')
				}

				this.PageList.splice(index, 1)
			},
			DeleteChildData(data, index) { // 删除 主列表 - 工艺路线详情弹层 - 子列表数据
				this.PageItemData['Array'].splice(index, 1);

				this.PageItemData['Array'].map((item, index) => {
					item['index'] = index;
				})
				// this.PageList[this.PageListIndex]['Array'].splice(index, 1);
			},
			closePathPopup() { // 关闭添加路径弹层
				this.ShowPathPopup = false;
			},
			openPathPopup() { // 添加添加路径弹层

			},
			ShowPopup(data, Type) {
				// 记录是通过主列表加的 还是 工艺路线子列表加的
				this.PageGongxuType = Type;

				this.PopupLoadStatus = 'loadmore'; // 加载状态初始化
				this.page.pageIndex = 1; // 页数初始化
				this.IsCheckedLength = 0; // 选中数 清0
				this.TabSelectIndex = 0;
				if (data.id == 0) { // 工序
					this.ProcessList = [];
					this.loadmore();
					this.ShowChoiceProcess = true;
				} else { // 工艺路线
					return uni.showToast({
						title: '此通道暂未开启',
						icon: 'none'
					})
				};
				this.ShowPathPopup = false; // 关闭选择路径弹层
			},
			closeProcessPopup() {
				this.ProcessList = [];
				this.ShowChoiceProcess = false;
			},
			openProcessPopup() {

			},
			AddProcess() { // 新增工序按钮
			},
			closeRoutingPopup() {
				this.ShowChoiceRouting = false;
			},
			openRoutingPopup() {

			},
			RoutingSearch() { // 工艺路线弹层搜索
				console.log(123123)
			},
			changeIptGetInfo(str) { // 弹层搜索框数据修改时触发
				var that = this;
				this.page.pageIndex = 1;
				that.PopupLoadStatus = 'loading';
				if (str == 'Process') {
					this.ProcessList = []; // 清除工序列表数据
					this.loadmore();
				}
			},
			scrolltolower(str) { // 列表触底
				if (str == 'Process') {
					this.loadmore();
				} else if ('Routing') {
					this.loadmoreRouting();
				}
			},
			loadmore() {
				let that = this;

				if (that.PopupLoadStatus == 'nomore') return;
				that.PopupLoadStatus = 'loading';

				let obj = {
					SearchKey: this.searchValue,
					PageIndex: this.page.pageIndex,
					PageSize: this.page.pageSize,
				};
				that.Request.request('XGD_Procedure', obj, function(ret) {

					if (ret.status == 200) {
						that.TotalPopup = ret.data.ds1[0]['Total'];

						ret.data.ds.map(item => {
							item.checked = false;
						})

						that.ProcessList.push(...ret.data.ds);

						that.page.pageIndex++;

						that.PopupLoadStatus = 'loadmore';
						if (that.ProcessList.length == ret.data.ds1[0]['Total']) {
							that.PopupLoadStatus = 'nomore';
						}
						// console.log(JSON.stringify(that.ProcessList))
					}
				});
			},
			loadmoreRouting() { // 加载工艺路线弹层列表数据
				let that = this;
				this.PopupLoadStatus = 'nomore';
			},
			handleTabSelected(index) { // 切换工艺路线弹层的 tabs
				// 处理选中页签的逻辑
				// console.log(index)
				this.TabSelectIndex = index;
			},
			OpenCellInfo(data) { // 点击工艺路线查看详情
				this.PopupInfoData = data;
				// console.log(data)
				this.ShowDataInfo = true;
			},
			CloseDataInfo() { // 关闭工艺路线详情弹层
				this.ShowDataInfo = false;
			},
			ChoiceCell(data) { // 选中 cell
				// console.log(this.TabSelectIndex)
				data.checked = !data.checked;

				if (data.checked) {
					this.TheContainer.push(data);
				} else {
					this.TheContainer = this.TheContainer.filter(item => item.ID != data.ID);
				}

				this.IsCheckedLength = this.TheContainer.length;
			},
			PopupSubBtn(data) { // 弹层确认按钮
				// console.log(this.TheContainer)
				// 选中的 cell 数据
				let ChoiceData = JSON.parse(JSON.stringify(this.TheContainer));

				let Data = [];

				if (this.PageGongxuType == 'child') {
					Data = this.PageItemData['Array'];
				} else if (this.PageGongxuType == 'Main') {
					Data = this.PageList;
				}

				if (data == 'Process') { // 工序弹层，Type设为0
					ChoiceData.map(item => {
						item.Type = 0;
					});
					Data.push(...ChoiceData);
				} else if (data == 'Routing') { // 工艺路线弹层
					if (this.TabSelectIndex == 1) {
						// 工艺路线弹层 - 工艺路线
						// 选择 工艺路线 - Type 为 1
						ChoiceData.map(item => {
							item.Type = 1;
						});
						Data.push(...ChoiceData);
					} else {
						// 工艺路线弹层 - 工序
						// 选择 工序 - Type 为 0
						// 将所有工艺的数据拆出来

						let dataArr = [];
						for (let [index, item] of ChoiceData.entries()) {
							dataArr.push(...item.Array);
						};
						dataArr.map((item, index) => {
							item.Type = 0;
							item['index'] = index;
						});
						Data.push(...dataArr);

					}
				}

				Data.map((item, index) => {
					item['index'] = index;
				});

				if (this.PageGongxuType == 'child') {
					this.PageList[this.PageListIndex]['Array'] = Data;
				} else if (this.PageGongxuType == 'Main') {


					this.PageList = Data;
				}

				// console.log(Data)

				// 确认好后，关闭弹层，清空对应数据
				this.ShowChoiceProcess = false; // 工序弹层
				this.ProcessList = []; // 工序数据列表
				this.ShowChoiceRouting = false; // 工艺路线弹层
				this.TheContainer = []; // 选中数据
				this.IsCheckedLength = 0; // 选中数
				this.searchValue = ''; // 搜索框
				this.TabSelectIndex = 0;
				this.PageGongxuType = 'Main';

			},
			EditCell(data, index) { // 编辑修改工序信息
				// console.log(JSON.stringify(this.PageList[index]))

				this.EditIndex = index;

				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'BaseScreenParm',
					data: {
						data: data,
						// FWorkshop: this.FWorkshop
						formData: this.Dispatch_Create_Formdata
					}
				})


				uni.navigateTo({
					url: './DispatchRoutingInfo'
				})
			},
			SubmitBtn() { // 最终确定按钮

				this.PageList.map((item, index) => {
					item.index = index

					if (!item.hasOwnProperty('TableData')) {
						item['TableData'] = [];
					}
				});

				let Obj = {
					Name1: 'BaseScreenParm',
					data: this.PageList
				};


				this.$store.commit('ChangeAndSetStateData', Obj);

				uni.$emit('CreateDispatch_Choice', {
					type: '工艺路线'
				})
				uni.navigateBack()

			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		// height: calc(100vh - 60px);
		background-color: #f9f9f9;

		.MainBox {
			flex: 1;
			overflow: auto;

			.u-cell {
				// height: 100%;

				.u-cell__body {
					height: 100% !important;
				}
			}

			.HasDataBox {
				// display: flex;
				// flex-direction: column;

				.ListBox {
					.MaxBox {
						height: 100%;

						.TheIndex {
							height: 100%;
							min-width: 60px;
							justify-content: center;

							.IndexBox {
								width: 24px;
								height: 24px;
								background-color: #51d0d0;
								color: #fff;
								border-radius: 24px;
								line-height: 24px;
								text-align: center;
							}
						}
					}
				}

				.BtnBox {
					display: flex;
					align-items: center;
					justify-content: center;

					.SaveBtn {
						width: 80%;
						color: #51d0d0;
						background-color: #fff;
						border: 1px solid #51d0d0;
						border-radius: 12px;
					}
				}
			}


			.isEmptyBox {
				height: 100%;
				padding-top: 10vh;
				// display: flex;
				// align-items: center;
				// justify-content: center;

				.EmptyTextBox {

					.EmptyText {
						text-align: center;
						margin-top: 20px;
						color: #999;
						font-size: 14px;
					}

					.EmptyAddBtn {
						width: 100%;
						color: #fff;
						background-color: #51d0d0;
						border-radius: 12px;
						margin-top: 20px;

						.BtnText {
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}

		.BottomBox {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			padding: 10px 15px;
			background-color: #fff;
			border-top: 1px solid #efefef;

			uni-button {
				margin-left: initial !important;
				margin-right: initial !important;
			}

			.SaveBtn {
				width: 40%;
				background-color: #fff;
				color: #51d0d0;
				border: 1px solid #51d0d0;
				border-radius: 12px;
			}

			.SubBtn {
				// width: 40%;
				width: 90%;
				background-color: #51d0d0;
				color: #fff;
				border-radius: 12px;
			}
		}


		.PathPopupBox {

			.MainBox {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				padding: 20px 10px;
				overflow: hidden;
				border-radius: 12px 12px 0 0;

				.ModuleBox {
					height: 70px;
					background-color: #eeeeee;
					width: 45%;
					border-radius: 8px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.Icon {
						font-weight: 600;
					}

					.Text {
						margin-top: 6px;
						font-size: 13px;
						font-weight: 600;
					}
				}
			}
		}

		// 工艺路线详情弹层
		.GLYXInfo {
			.u-transition {
				z-index: 9999 !important;
			}

			.MainBox {
				display: flex;
				flex-direction: column;
				padding-bottom: 20px;

				.ListBox {
					// flex: 1;
				}
			}
		}

		// 工序弹层
		.Gongxu {
			.u-transition {
				z-index: 999999 !important;
			}
		}

		// 复选框样式 start
		.uni-checkbox-input {
			border: 2px solid #d1d1d1 !important;
		}

		.uni-checkbox-input-checked {
			background: #51d0d0;
			color: #fff !important;
			border-color: #51d0d0 !important;
		}

		// 复选框样式 End


		.ProcessPopupBox {
			height: 90vh;
			display: flex;
			flex-direction: column;

			.SearchBox {
				// background-color: #fff;
				background-color: #51d0d0;
				padding: 6px 10px;
			}

			.MainBox {
				flex: 1;
				// overflow: auto;
				// height: 100%;
				background-color: #eeeeee;
				// display: flex;
				// flex-direction: column;

				.TheList {
					// flex: 1;
					height: 100% !important;
					background-color: #fff;

					.listBox {
						// height: 100%;
						padding-bottom: 20px;

						.ListItemBox {
							// height: 100%;

							.u-cell {

								.u-cell__body {
									padding: 0 !important;
								}

								.CellRight {
									padding-right: 10px;
								}
							}

							.ListCellLeft {

								.CheckBox {
									padding: 14px 15px;
									width: 100%;

									.TitleBox {
										margin-left: 6px;
										font-size: 16px;
									}

									.CellLabel {
										color: #818181;
										font-size: 14px;
										margin-top: 6px;
										width: calc(100vw - 80px - 100px);
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
									}
								}
							}

							.Popup_Look {
								background-color: #51d0d0;
								color: #fff;
								border-radius: 8px;
								min-width: 30px;
								height: 30px;
								line-height: 30px;
								font-size: 12px;
								margin-right: 10px;
							}
						}
					}
				}
			}

			.PopupBottomBox {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 15px;
				border-top: 1px solid #efefef;

				.ChoiceNumBox {
					width: fit-content;

					.Nums {
						margin: 0 4px 0 2px;
						color: #51d0d0;
						font-size: 18px;
						font-weight: 600;
					}
				}

				.BtnBox {
					// flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.SubBtn {
						// width: 40%;
						min-width: 200px;
						background-color: #51d0d0;
						color: #fff;
						border-radius: 12px;
					}
				}
			}
		}
	}
</style>